<template>
	<view>
		<view class="todyFwList hasFlex active">
			<view class="currTime">
				<view>05月26日</view>
				<view class="detTime">09:30</view>
			</view>
			<view class="fwContent">
				<view class="hasFlex">
					<view class="fwxq ellip">第一节 员工心理健康咨询</view>
					<view class="fwType">
						<text class="iconfont icon-qyTtfwkc"></text>
						<text>课程</text>
					</view>
				</view>
				<view class="ttfwName ellip">关于管理运营活动的新互动辅导</view>
			</view>
		</view>
		<view class="todyFwList hasFlex">
			<view class="currTime">
				<view>05月26日</view>
				<view class="detTime">09:30</view>
			</view>
			<view class="fwContent">
				<view class="hasFlex">
					<view class="fwxq ellip">第一节 员工心理健康咨询法大师傅大师傅</view>
					<view class="fwType">
						<text class="iconfont icon-qyTtfwcp"></text>
						<text>测评</text>
					</view>
				</view>
				<view class="ttfwName ellip">关于管理运营活动的新互动辅导</view>
			</view>
		</view>
		<!-- <view class="todyFwList hasFlex">
			<view class="currTime">
				<view>05月26日</view>
				<view class="detTime">09:30</view>
			</view>
			<view class="fwContent">
				<view class="hasFlex">
					<view class="fwxq ellip">第一节 员工心理健康咨询股份大股东</view>
					<view class="fwType">
						<text class="iconfont icon-qyTtfwzb"></text>
						<text>直播</text>
					</view>
				</view>
				<view class="ttfwName ellip">关于管理运营活动的新互动辅导</view>
			</view>
		</view>
		<view class="todyFwList hasFlex">
			<view class="currTime">
				<view>05月26日</view>
				<view class="detTime">09:30</view>
			</view>
			<view class="fwContent">
				<view class="hasFlex">
					<view class="fwxq ellip">第一节 员工心理健康咨询</view>
					<view class="fwType">
						<text class="iconfont icon-qyTtfwfw"></text>
						<text>服务</text>
					</view>
				</view>
				<view class="ttfwName ellip">关于管理运营活动的新互动辅导</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		
	}
</script>
<style src="@/static/fonts/staatliches.css"></style>
<style lang="scss" scoped>
	.todyFwList{
		border: 1rpx solid #e5e5e5;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.currTime{
			width: 130rpx;
			font-size: 26rpx;
			text-align: center;
			color: $qy-main2;
			flex-shrink: 0;
			position: relative;
			margin-right: 30rpx;
			.detTime{
				font-family: $sqFontSta;
				font-size: 40rpx;
				margin-top: 5rpx;
				color: $pss-qy-main;
			}
			&::after{
				content: "";
				width: 1rpx;
				height: 60rpx;
				background: #e5e5e5;
				position: absolute;
				right: -10rpx;
				top: 50%;
				margin-top: -30rpx;
			}
		}
		.fwContent{
			width: 75%;
			.fwxq{
				width: 82%;
				font-size: 28rpx;
				font-weight: 600;
				color: $qy-main2;
			}
			.fwType{
				width: 100rpx;
				font-size: 24rpx;
				color: $pss-qy-main;
				display: flex;
				align-items: center;
				justify-content: center;
				.iconfont{
					margin-right: 10rpx;
					font-size: 30rpx;
					&.icon-qyTtfwcp{
						font-size: 26rpx;
					}
					&.icon-qyTtfwzb{
						font-size: 36rpx;
					}
					&.icon-qyTtfwfw{
						font-size: 28rpx;
					}
				}
			}
			.ttfwName{
				font-size: 24rpx;
				color: $qy-main6;
				margin-top: 18rpx;
			}
		}
		&.active{
			background: $pss-qy-main;
			border: 1rpx solid $pss-qy-main;
			.currTime,
			.detTime,
			.fwxq{
				color: #fff;
			}
			.currTime::after{
				background: rgba(255,255,255,.3);
			}
			.fwType,
			.ttfwName{
				color: rgba(255,255,255,.8);
			}
		}
		&:last-child{
			margin-bottom: 0;
		}
	}
	
</style>